<div id="smm_container" class="smm-container"></div>
<div class="smm-toolbar">
    <div class="smm-toolbar-block">
        <div class="smm-toolbar-btn-list">
            <div class="smm-toolbar-btn" id="smm_back"><span class="bx bx-undo icon iconfont"></span><span class="text">${config.lang.toolbar.undo}</span></div>
            <div class="smm-toolbar-btn" id="smm_forward"><span class="bx bx-redo icon iconfont"></span><span class="text">${config.lang.toolbar.redo}</span></div>
            <div class="smm-toolbar-btn" id="smm_insert_node"><span class="bx bx-git-branch icon iconfont"></span><span class="text">${config.lang.toolbar.insertSiblingNode}</span></div>
            <div class="smm-toolbar-btn" id="smm_insert_child_node"><span class="bx bx-sitemap icon iconfont"></span><span class="text">${config.lang.toolbar.insertChildNode}</span></div>
            <div class="smm-toolbar-btn" id="smm_delete_node"><span class="bx bx-trash icon iconfont"></span><span class="text">${config.lang.toolbar.deleteNode}</span></div>
            <div class="smm-toolbar-btn" id="smm_insert_image"><span class="bx bx-image icon iconfont"></span><span class="text">${config.lang.toolbar.image}</span></div>
            <div class="smm-toolbar-btn" id="smm_insert_icon"><span class="bx bx-smile icon iconfont"></span><span class="text">${config.lang.toolbar.icon}</span></div>
            <div class="smm-toolbar-btn" id="smm_insert_url"><span class="bx bx-link icon iconfont"></span><span class="text">${config.lang.toolbar.link}</span></div>
            <div class="smm-toolbar-btn" id="smm_insert_remark"><span class="bx bx-detail icon iconfont"></span><span class="text">${config.lang.toolbar.note}</span></div>
            <div class="smm-toolbar-btn" id="smm_insert_ga"><span class="bx bxs-dashboard icon iconfont"></span><span class="text">${config.lang.toolbar.summary}</span></div>
        </div>
        
        <div class="dropdown">
            <div class="smm-toolbar-btn dropdown-toggle" id="smm_more_dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left: 20px;">
                <span class="bx bxs-shapes icon iconfont"></span><span class="text">${config.lang.toolbar.more}</span>
            </div>
            <div class="dropdown-menu" aria-labelledby="smm_more_dropdown">
                <div class="smm-toolbar-btn-list v">
                    <div class="smm-toolbar-btn" id="smm_insert_relation_line"><span class="bx bx-git-compare icon iconfont"></span><span class="text">${config.lang.toolbar.associativeLine}</span></div>
                    <div class="smm-toolbar-btn" id="smm_add_outer_frame"><span class="bx bx-border-none icon iconfont"></span><span class="text">${config.lang.toolbar.outerFrame}</span></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="smm_tools" class="smm-tools">
    <ul class="menu">
        <li id="smmtools_menu" class="menu-item action-trigger title">
            <span class="bx bx-menu" />
            <span class="menu-text">${config.lang.tools.menu}</span>
        </li>
        <li class="menu-item menu-divider" />
        <li id="smmtools_enter_fullscreen" class="menu-item action-trigger">
            <span class="bx bx-fullscreen" />
            <span class="menu-text">${config.lang.tools.enterFullScreen}</span>
        </li>
        <li id="smmtools_exit_fullscreen" class="menu-item action-trigger">
            <span class="bx bx-exit-fullscreen" />
            <span class="menu-text">${config.lang.tools.exitFullScreen}</span>
        </li>
        <li id="smmtools_enter_fulltab" class="menu-item action-trigger">
            <span class="bx bx-expand-alt" />
            <span class="menu-text">${config.lang.tools.enterFullTab}</span>
        </li>
        <li id="smmtools_exit_fulltab" class="menu-item action-trigger">
            <span class="bx bx-collapse-alt" />
            <span class="menu-text">${config.lang.tools.exitFullTab}</span>
        </li>
        <li class="menu-item menu-divider" />
        <li id="smmtools_export" class="menu-item action-trigger">
            <span class="bx bx-export" />
            <span class="menu-text">${config.lang.tools.exportFile}</span>
            <select>
                <option value="">${config.lang.tools.selectExportType}</option>
                <option value="png">.png</option>
                <option value="json">.json</option>
                <option value="svg">.svg</option>
                <option value="pdf">.pdf</option>
                <option value="md">.md</option>
                <option value="xmind">.xmind</option>
            </select>
        </li>
        <li id="smmtools_save_imagenote" class="menu-item action-trigger">
            <span class="bx bx-image-add" />
            <span class="menu-text">${config.lang.tools.saveAttachment}</span>
        </li>
        <li class="menu-item menu-divider" />
        <li id="smmtools_mouse_select" class="menu-item">
            <span class="bx bx-mouse-alt" />
            <span class="menu-text">${config.lang.tools.selection}</span>
            <select style="max-width:180px;">
                <option value="0">${config.lang.tools.mouseRightSelect}</option>
                <option value="1">${config.lang.tools.mouseLeftSelect}</option>
            </select>
        </li>
        <li id="smmtools_struct" class="menu-item">
            <span class="bx bx-grid-alt" />
            <span class="menu-text">${config.lang.tools.structure}</span>
            <select>
                <option value="logicalStructure">${config.lang.tools.logicalStructure}</option>
                <option value="logicalStructureLeft">${config.lang.tools.logicalStructureLeft}</option>
                <option value="mindMap">${config.lang.tools.mindMap}</option>
                <option value="organizationStructure">${config.lang.tools.organizationStructure}</option>
                <option value="catalogOrganization">${config.lang.tools.catalogOrganization}</option>
                <option value="timeline">${config.lang.tools.timeline}</option>
                <option value="timeline2">${config.lang.tools.timeline2}</option>
                <option value="fishbone">${config.lang.tools.fishbone}</option>
                <option value="verticalTimeline">${config.lang.tools.verticalTimeline}</option>
            </select>
        </li>
        <li id="smmtools_theme" class="menu-item">
            <span class="bx bx-palette" />
            <span class="menu-text">${config.lang.tools.theme}</span>
            <select>
            </select>
        </li>
        <li class="menu-item menu-divider" />
        <li id="smmtools_help" class="menu-item action-trigger">
            <span class="bx bx-help-circle" />
            <span class="menu-text">${config.lang.tools.help}</span>
        </li>
    </ul>
</div>

<div class="smm-backdrops-container">
    <div class="modal fade" id="imageBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="imageBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageBackdropLabel">${config.lang.backdrops.imageOnTitle}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">${config.lang.backdrops.imageUrl}</span>
                        </div>
                        <input name="imageUrlContent" type="text" class="form-control" placeholder="${config.lang.backdrops.imageUrlPlaceholder}" />
                    </div>
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">${config.lang.backdrops.imageTitle}</span>
                        </div>
                        <input name="imageTitleContent" type="text" class="form-control" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">${config.lang.backdrops.close}</button>
                    <button type="button" id="imageSave" class="btn btn-primary">${config.lang.backdrops.save}</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="urlLinkBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="urlLinkBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="urlLinkBackdropLabel">${config.lang.backdrops.linkOnTitle}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">${config.lang.backdrops.linkUrl}</span>
                        </div>
                        <input name="urlLinkContent" type="text" class="form-control" placeholder="${config.lang.backdrops.linkUrlPlaceholder}" />
                    </div>
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">${config.lang.backdrops.linkName}</span>
                        </div>
                        <input name="urlTextContent" type="text" class="form-control" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">${config.lang.backdrops.close}</button>
                    <button type="button" id="urlLinkSave" class="btn btn-primary">${config.lang.backdrops.save}</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="remarkBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="remarkBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="remarkBackdropLabel">${config.lang.backdrops.remarkOnTitle}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="input-group mb-3">
                        <textarea class="form-control" name="remarkContent" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">${config.lang.backdrops.close}</button>
                    <button type="button" id="remarkSave" class="btn btn-primary">${config.lang.backdrops.save}</button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="modal fade" id="iconListBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="iconListBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="iconListBackdropLabel">${config.lang.backdrops.iconOnTitle}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">${config.lang.backdrops.close}</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="smm-components-container">
    <div id="nodeOuterFrameContainer">
        <div class="smm-outer-frame-btn" id="smm_delete_outer_frame">
            <span class="bx bx-trash iconfont"></span>
        </div>
    </div>
</div>